<template>
  <div>
    <div class="box">
      <div class="box-left">
        <div class="box-left-top">
          <!-- 工单统计 -->
          <div class="bltl blt-all">
            <div>
              <span class="work">工单统计</span>
              <span class="time">2022.11.01 ~ {{ endTime }}</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <p class="left-num">{{ TaskReportInfo.total }}</p>
                  <span class="left-desc">工单总数(个)</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <p class="left-num">{{ TaskReportInfo.completedTotal }}</p>
                  <span class="left-desc">完成工单(个)</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <p class="left-num">
                    {{ TaskReportInfo.total - TaskReportInfo.cancelTotal }}</p>
                  <span class="left-desc">进行工单(个)</span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <p class="left-num">{{ TaskReportInfo.cancelTotal }}</p>
                  <span class="left-desc">取消工单(个)</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 销售统计 -->
          <div class="bltr blt-all">
            <div>
              <span class="work">销售统计</span>
              <span class="time">2022.11.01 ~ {{ endTime }}</span>
            </div>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <p class="right-num left-num">{{ OrderCount }}</p>
                  <span class="right-desc left-desc">订单量（个）</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <p class="right-num left-num">{{ OrderAmount }}</p>
                  <span class="right-desc left-desc">销售额（万元）</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 销售数据 -->
        <div class="box-left-bottom blt-all">
          <div style="margin-bottom: 20px">
            <span class="work">销售数据</span>
            <span class="time">2022.11.01 ~ {{ endTime }}</span>
            <!-- 年月周按钮 -->
            <div class="week-month-year">
              <div
                @click="getMonths(1)"
                class="item"
                :class="ischecked === 1 && 'is-checked'"
              >
                周
              </div>
              <div
                @click="getMonths(2)"
                class="item"
                :class="ischecked === 2 && 'is-checked'"
              >
                月
              </div>
              <div
                @click="getMonths(3)"
                class="item"
                :class="ischecked === 3 && 'is-checked'"
              >
                年
              </div>
            </div>
          </div>
          <!-- 可视化图表 -->
          <div class="echart">
            <!-- 销售额趋势图 -->
            <div class="echart-box">
              <div
                class="echart-left"
                v-if="!isEmpty1"
                ref="sales"
              ></div>
              <Empty v-if="isEmpty1" />
            </div>

            <!-- 销售额分布 -->
            <div
              ref="salesDist"
              class="echart-box"
            >
              <Empty v-if="isEmpty2" />
              <!-- 空状态 -->
            </div>
          </div>
        </div>
      </div>
      <!-- 商品热榜 -->
      <div class="box-right blt-all">
        <div>
          <span class="work">商品热榜</span>
          <span class="time">2022.11.01 ~ {{ endTime }}</span>
        </div>
        <!-- 列表 -->
        <el-row>
          <el-col
            v-for="(item, index) in SkuTop"
            :key="index"
          >
            <span style="flex: 2">
              <i
                v-if="index === 0"
                class="Champion"
              >{{ index + 1 }}</i>
              <i
                v-if="index === 1"
                class="Runner-up"
              >{{ index + 1 }}</i>
              <i
                v-if="index === 2"
                class="Third"
              >{{ index + 1 }}</i>
              <i v-if="index > 2">{{ index + 1 }}</i>
            </span>
            <span
              class="goodsname"
              style="flex: 6"
            >{{ item.skuName }}</span>
            <span
              class="num"
              style="flex: 2"
            >{{ item.count }}单</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 合作商 -->
    <div class="parth">
      <el-row :gutter="20">
        <el-col :span="14">
          <!-- 合作商点位数 -->
          <div class="grid-content">
            <div class="title">
              合作商点位数Top5
              <i class="el-icon-chat-dot-round"></i>
            </div>
            <div class="chart">
              <div
                ref="canvas"
                class="canvas"
              ></div>
              <div class="numerical">
                <div class="count">16</div>
                <div class="name">点位数</div>
                <div class="count count2">5</div>
                <div class="name">合作商数</div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 异常设备监控 -->
        <el-col :span="10">
          <div class="grid-content">
            <div class="title">
              异常设备监控
              <i class="el-icon-chat-dot-round"></i>
            </div>
            <!-- 空状态 -->
            <Empty />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
// 引入外部样式
import '@/styles/second/homePage.scss'
// 引入接口
import {
  getOrderAmount,
  getOrderCount,
  getTaskReportInfo,
  getSkuTop,
  getErrorStatus10,
  getAmountCollect,
  getRegionCollect,
} from '@/api/homePage'
// 引入echarts
import * as echarts from 'echarts'
// 引入空状态
import Empty from '@/components/empty.vue'
export default {
  components: {
    Empty,
  },
  async created () {
    const time = new Date().toLocaleString()
    this.timedata.end = time.replace(/\//g, '-')
    this.endTime = this.timedata.end.split(' ')[0]
    // 获取销售额
    const OrderAmount = await getOrderAmount(this.timedata)
    // 计算销售额保留两位小数
    const num = OrderAmount.data.slice(0, 1) + '.' + OrderAmount.data.slice(1)
    this.OrderAmount = (+num).toFixed(2)
    // 获取订单数
    const OrderCount = await getOrderCount(this.timedata)
    this.OrderCount = OrderCount.data
    // 获取工单数据
    const TaskReportInfo = await getTaskReportInfo(this.timedata)
    this.TaskReportInfo = TaskReportInfo.data[0]
    // 商品热榜
    const SkuTop = await getSkuTop(this.timedata)
    this.SkuTop = SkuTop.data
    // 获取故障设备数
    const ErrorStatus10 = await getErrorStatus10(this.timedata)
    // 初始echart图表
    this.getMonths()
    this.init = true
  },
  async mounted () {
    // 合作商点位图
    const canvas = echarts.init(this.$refs.canvas)
    canvas.setOption({
      color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#becce6'],
      tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>总占比 : {c}%',
      },
      series: [
        {
          type: 'pie',
          radius: [30, 110],
          center: ['50%', '50%'],
          roseType: 'radius',
          label: {
            show: true,
            formatter: '{b}\n{d}%',
            fontWeight: 700,
          },
          data: [
            {
              value: 62.5,
              name: '金燕龙合作商',
            },
            {
              value: 12.5,
              name: '天华物业',
            },
            {
              value: 12.5,
              name: '北京合作商',
            },
            {
              value: 6.25,
              name: 'likede',
            },
            {
              value: 6.25,
              name: '佳佳',
            },
          ],
        },
      ],
    })
  },
  data () {
    return {
      timedata: {
        start: '2022-11-01 00:00:00',
        end: '',
      },
      isEmpty1: false,
      isEmpty2: false,
      endTime: '',
      OrderAmount: 0, // 销售额
      OrderCount: 0, // 订单数
      TaskReportInfo: {}, // 工单数据
      SkuTop: [], // 商品热榜
      ischecked: 1, // 周月年点击效果
      AmountCollect: {}, // 销售额
      RegionCollect: {}, // 销售额分布
      init: false,  // 判断空状态
    }
  },
  computed: {
    // 本周第一天
    firstDayToWeek () {
      const date = new Date()
      return moment(date.setDate(date.getDate() - (date.getDay() || 7) + 1)).format('YYYY-MM-DD')
    },
    // 将月份筛选计算
    getsales () {
      if (this.init) {
        let num = 0 // 用来跳过一些月份
        const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        const arr = this.AmountCollect.xAxis.map((item, index) => {
          if (this.ischecked === 1) {
            // 如果是周就转换为星期
            return week[index]
          } else {
            if (index === num + 3 || index === 0) {
              num = index
              let newarr = item.split('-')
              // 如果是月份进行修改
              if (this.ischecked === 2) {
                newarr.shift()
                newarr.splice(1, 0, '月')
                newarr.push('日')
              } else {
                // 如果是年份进行修改
                newarr[1] = +newarr[1] + ''
                newarr.splice(1, 0, '年')
                newarr.splice(3, 0, '月')
              }
              return newarr.join('')
            }
            return ''
          }
        })
        return arr
      } else {
        this.isEmpty1 = !this.isEmpty1
        this.$message.error('网络延迟，请重试')
      }
    },
    // 销售额趋势图数据
    getAmount () {
      const money = this.AmountCollect.series.map((item) =>
        item > 100 ? (item + '').slice(0, -2) : item
      )
      return {
        backgroundColor: '#fff',
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: 0,
          right: 24,
          top: '10%',
          bottom: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br />{b}',
        },
        xAxis: [
          {
            type: 'category',
            data: this.getsales,
            axisLine: {
              lineStyle: {
                color: '#ddd',
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999',
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：元',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#999',
              },
            },
            splitLine: {
              show: true,
            },
          },

        ],
        series: [
          {
            type: 'line',
            data: money,
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            lineStyle: {
              color: '#ff5757',
              width: 4,
            },
            itemStyle: {
              normal: {
                color: '#ff5757',
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fe9a8bb3',
                },
                {
                  offset: 1,
                  color: '#fe9a8b03',
                },
              ]),
            },
          },
        ],
      }
    },
    // 销售分布图数据
    getRegion () {
      const money = this.RegionCollect.series.map((item) =>
        item > 100 ? (item + '').slice(0, -2) : item
      )
      return {
        color: ['#91b0ff'],
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br />{b}',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: 10,
          right: 0,
          top: '10%',
          bottom: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.RegionCollect.xAxis,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: '#ddd',
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999',
              },
              margin: 15,
            },
          },
        ],
        yAxis: [
          {
            name: '单位：元',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999',
              },
              margin: 15,
            },
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            data: money,
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
            },
          },
        ],
      }
    },
  },
  methods: {
    async getMonths (num = 1) {
      // 修改按钮效果
      this.ischecked = num
      // 销售额趋势图
      // 判断是周月年，修改start初始时间
      if (num === 1) {
        this.timedata.start = this.firstDayToWeek
      } else if (num === 2) {
        num--
        this.timedata.start = '2022-11-01 00:00:00'
      } else {
        num--
        this.timedata.start = '2022-01-01 00:00:00'
      }
      // 销售额趋势接口
      const res = await getAmountCollect(num, this.timedata)
      this.AmountCollect = res.data
      // 销售额趋势DOM元素
      const sales = echarts.init(this.$refs.sales)
      // 可视化图表
      sales.setOption(this.getAmount)
      // -----------------------------
      // 销售额分布图接口
      const rec = await getRegionCollect(this.timedata)
      this.RegionCollect = rec.data
      // 分布图DOM元素
      const salesDist = echarts.init(this.$refs.salesDist)
      // 可视化图表
      salesDist.setOption(this.getRegion)
    },
  },
}
</script>

<style lang="scss" scoped></style>
